<template>
  <div v-loading="tableLoading" class="gl_contentBox gl_heightFull">
    <!-- 筛选项 -->
    <el-row :gutter="20" class="gl_searchBox" style="margin: 0 0 15px 0;">
      <el-col :span="6" :lg="4">
        <p>赛事名称</p>
        <el-input v-model="Api_GET_EventsManagementCompetitionInsuranceInfoQO.CompetitionName" placeholder="请输入赛事名称" size="mini" clearable @change="gettablelist()"/>
      </el-col>
      <el-col :span="6" :lg="4">
        <p>是否购买保险</p>
        <el-select size="mini" v-model="Api_GET_EventsManagementCompetitionInsuranceInfoQO.IsInsurance" placeholder="请选择保险状态" filterable @change="gettablelist()">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-col>
      <el-col :span="6" :lg="5">
        <p>比赛时间</p>
        <el-date-picker
          v-model="filterGameDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="mini"
          @change="handleGameTimeChange"
        />
      </el-col>
      <el-col :span="6" :lg="4" align="right" class="search_btn">
        <!-- 查询按钮 -->
        <el-button type="primary" size="mini" @click="gettablelist()">查询</el-button>
        <!-- 重置按钮 -->
        <el-button type="warning" size="mini" @click="clickReset()">重置</el-button>
      </el-col>
    </el-row>
    <el-table class="gl_table_noBorder" :data="tableData" size="mini">
      <el-table-column type="index" label="序号" align="center" :width="60" />
      <el-table-column prop="competitionName" label="赛事名称" align="center" />
      <el-table-column label="比赛日期" :width="200" align="center">
          <template slot-scope="{ row }">
            <div v-if="row.competitionStartTime">
              {{ row.competitionStartTime | FormatDate('yyyy-MM-dd') }} 至 {{ row.competitionEndTime | FormatDate('yyyy-MM-dd') }}
            </div>
          </template>
        </el-table-column>
      <el-table-column type="index" label="是否购买保险" align="center" :width="200">
          <template slot-scope="{row}">
            <span>{{ row.isInsurance?'是':'否' }}</span>
          </template>
        </el-table-column>
      <el-table-column label="操作" :width="200">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="retrial(row)">详情</el-button>
            <el-button type="text" size="mini" @click="cldelete(row)">修改状态</el-button>
          </template>
      </el-table-column>
    </el-table>

    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_EventsManagementCompetitionInsuranceInfoQO.Page"
        :page-size="Api_GET_EventsManagementCompetitionInsuranceInfoQO.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <Approve ref="approve" />
  </div>
</template>
<script>
import {
  api_GET_EventsManagementCompetitionInsuranceInfo, // 确认是否有未支付的订单
  api_PUT_EventsManagementCompetitionInsuranceInfo
} from '@/extend/api/gameswaggerApi/app';
import {
  Api_GET_EventsManagementCompetitionInsuranceInfoQO

} from '@/lib/form/game/swaggerForm';
export default {
  data() {
    return {
      total: 0,
      filterGameDate: [],
      tableLoading: false,
      tableData: [],
      Api_GET_EventsManagementCompetitionInsuranceInfoQO: new Api_GET_EventsManagementCompetitionInsuranceInfoQO(),
    };
  },
  computed: {
  },
  created() {
    this.gettablelist();
  },
  methods: {
    // 初始化
    gettablelist(page) {
      this.tableLoading = true;
      this.Api_GET_EventsManagementCompetitionInsuranceInfoQO.Page = page || 1;
      this.Api_GET_EventsManagementCompetitionInsuranceInfoQO.SkipCount = (this.Api_GET_EventsManagementCompetitionInsuranceInfoQO.Page - 1) * this.Api_GET_EventsManagementCompetitionInsuranceInfoQO.MaxResultCount;
      api_GET_EventsManagementCompetitionInsuranceInfo(this.Api_GET_EventsManagementCompetitionInsuranceInfoQO).then(res => {
        this.tableData = res.items;
        this.tableLoading = false;
        this.total = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 处理时间筛选项
    handleGameTimeChange(time) {
      this.Api_GET_EventsManagementCompetitionInsuranceInfoQO.competitionStartTime = time && time[0];
      this.Api_GET_EventsManagementCompetitionInsuranceInfoQO.competitionEndTime = time && time[1];
      this.gettablelist();
    },
    cldelete(row) {
      this.tableLoading = true;
      api_PUT_EventsManagementCompetitionInsuranceInfo(row.id, { 'isInsurance': !row.isInsurance }).then(res => {
        this.$message({ type: 'success', message: '修改成功' });
        this.tableLoading = false;
        this.gettablelist();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      })
    },
    retrial(row) {
      this.$router.push({
        name: 'InsuranceSearchdetail',
        query: { id: row.id }
      });
    },
    // 重置
    clickReset() {
      this.filterGameDate = [];
      this.Api_GET_EventsManagementCompetitionInsuranceInfoQO = new Api_GET_EventsManagementCompetitionInsuranceInfoQO();
      this.gettablelist();
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.Api_GET_EventsManagementCompetitionInsuranceInfoQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
  }
};
</script>
<style>
</style>
